<template>
  <ts-form
    :data="formData"
    :rules="formRules"
    @submit="submitConfigForm"
    ref="xForm"
    class="bi-save-con"
  >
    <div slot="formCon" class="height100">
      <ts-form-item field="name">
        <ts-input
          v-model="formData.name"
          :title="`${portalType==1?'门户':(portalType==2?'组件':'模版')}名称：`"
          :emphasize="true"
          :key="'name'+formData.id"
          titleWidth="110"
        ></ts-input>
      </ts-form-item>
      <ts-form-item field="compType" v-if="portalType==2">
        <ts-select
          :source="COMPTYPESOURCE"
          v-model="formData.compType"
          title="组件分类："
          :emphasize="true"
          @selected="setSelectName($event,'compTypeName')"
          :key="'compType'+formData.id"
        ></ts-select>
      </ts-form-item>
      <template v-if="portalType==1&&isPublish">
        <div class="flexbox">
          <div class="title form__title" style=" width: 110px ">发布信息：</div>
          <ts-button icon="iconfont icon-Group-13" type="text" @click="addSystem()"></ts-button>
        </div>
        <div class="table-con">
          <ts-table
            :key="'systemId'"
            :source="systemTableSource"
            width="100%"
            height="100%"
            ref="systemTable"
          ></ts-table>
        </div>
      </template>
    </div>
  </ts-form>
</template>

<script>
//防止重复提交的指令
export default {
  name: 'biSave',
  props: {
    isPublish: {
      type: Boolean,
      default: true
    },
    oldData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    portalType: {
      // 门户类型：1系统门户，2门户组件，3门户模板
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      formData: { ...this.oldData } || {},
      formRules: {
        name: [{ required: true, message: '请输入名称' }],
        compType: [{ required: true, message: '请选择组件分类' }]
      },
      COMPTYPESOURCE: this.$utils.getDictSource('COMPTYPESOURCE'),
      systemTableSource: this.systemTableSourceFn(),
      systemList: []
    }
  },
  computed: {},
  created() {
    this.getSystemList()
  },
  mounted() {},
  methods: {
    // 设置下拉框名称
    setSelectName(ev, key, choice, label) {
      this.$nextTick(() => {
        if (!choice) {
          this.formData[key] = ev[label || 'itemName']
        } else {
          this.formData[key] = ev.map(item =>
            item[label || 'itemName'].join(',')
          )
        }
      })
    },
    // 提交内容项
    submitConfigForm() {
      this.$emit('saveClick', { formData: this.formData, type: 'add' })
    },
    // 发布内容
    systemTableSourceFn() {
      let source = {
        rownumbers: true,
        showOverflow: true,
        editor: true,
        dataType: 'local',
        data:[{
          systemId:''
        }],
        colModel: this.colFn(),
        offPage: true,
        validRules: {
          systemId: [{ required: true, message: '所属应用不能为空' }],
          menuId: [{ required: true, message: '所属菜单不能为空' }]
        },
        editConfig: {
          trigger: 'click',
          mode: 'row',
          activeMethod: this.activeCellMethod,
          showStatus: true,
          showAsterisk: true
        }
      }
      return source
    },
    colFn() {
      return [
        {
          title: '所属应用',
          field: 'systemId',
          width: '120',
          editConfig: {
            name: '$select',
            options: [], //self.dataTypeList,
            immediate: true,
            // props: { transfer: false },
            events: { change: this.changeAttrEvent }
          }
        },
        {
          title: '应用代码',
          field: 'systemCode',
          width: '80'
        },
        {
          title: '所属菜单',
          field: 'menuId',
          width: '100',
          editConfig: {
            name: 'treeSelect',
            source: {code: 'menuId',text: 'orgName',children: 'children' ,enable:'enable',strictly:true},
            options:[{"menuId":"be79c236107c4efab30ef286d0adce17","orgCode":"NHFY","orgName":"南华大学附属第一医院","disabled":true,"children":[{"menuId":"0d50e39323d446c8918eb10401ba0837","orgCode":"NHFY01","orgName":"南华附一本院","disabled":false,"children":null},{"menuId":"308195558769405952","orgCode":"NHFY02","orgName":"南华附一分院","disabled":true,"children":null}]},{"menuId":"73e740a45e8a4bfa8640c58aa26f53cf","orgCode":"SYR","orgName":"湖南省人民医院","disabled":false,"children":[{"menuId":"6247cb89a31d824109dfc297","orgCode":"111","orgName":"测试1111","disabled":true,"children":null},{"menuId":"623d0fcb6a493b00508fbf52","orgCode":"MWD","orgName":"马王堆院区","disabled":true,"children":[{"menuId":"6247cc11a31d824109dfc298","orgCode":"dd","orgName":"测试","disabled":true,"children":null}]},{"menuId":"623d0fcb6a493b00508fbf53","orgCode":"TXG","orgName":"天心阁院区","disabled":true,"children":null},{"menuId":"624be798a31d8253844c8cec","orgCode":"TXG1","orgName":"天心阁院区1","disabled":true,"children":null},{"menuId":"62466e23a31d82455b1e8221","orgCode":"YLS","orgName":"岳麓山院区","disabled":true,"children":null}]}],
            nameField: 'menuName',
            selected: this.changeMenu
          }
        },
        {
          title: '操作',
          field: 'id',
          align: 'center',
          width: '30',
          sortable: false,
          buttons: [
            {
              icon: 'iconfont icon-Group-17 font16',
              type: 'editor',
              event: this.deleteItem,
              color: '#f00',
              text: '删除'
            }
          ]
        }
      ]
    },
    // 改变系统
    changeAttrEvent({ column: config, row: row, rowIndex: i, ev }) {
      let obj = this.systemList.find(res => res.value == ev.value)
      row.systemCode = obj.sysCode
      row.systemName = obj.sysName
      this.getMenuListBySysId(obj.id)
    },
    changeMenu(config,row,ev) {
      row.menuName = ev[0].orgName
      row.menuId = ev[0].menuId
    },
    // 获取数据类型
    getSystemList() {
      const _this = this
      this.$api({
        url:
          '/ts-system/api/ThpsAppModel/list?sord=desc&pageSize=1000&pageNo=1&sidx=create_date',
        data: { sysStatus: 1 },
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        },
        method: 'get'
      })
        .then(res => {
          if (res.rows) {
            let list = []
            for (let row of res.rows) {
              list.push({
                label: row.sysName,
                value: row.id,
                sysCode: row.sysCode
              })
            }
            _this.systemList = [...list]
            _this.systemTableSource.colModel[0].editConfig.options = list
          }
        })
        .catch(function(error) {
          // 请求失败
          _this.$utils.msg(_this, error.message || '系统异常', 'error')
        })
    },
    // 获取数据类型
    getMenuListBySysId(menuId) {
      const _this = this
      this.$api({
        url:
          '/ts-system/api/ThpsAppModel/list?sord=desc&pageSize=1000&pageNo=1&sidx=create_date',
        data: { sysStatus: 1 },
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        },
        method: 'get'
      })
        .then(res => {
          if (res.rows) {
            let list = []
            for (let row of res.rows) {
              list.push({
                label: row.sysName,
                value: row.id,
                sysCode: row.sysCode
              })
            }
            _this.systemList = [...list]
            _this.systemTableSource.colModel[0].editConfig.options = list
          }
        })
        .catch(function(error) {
          // 请求失败
          _this.$utils.msg(_this, error.message || '系统异常', 'error')
        })
    },
    // 添加发布内容
    addSystem() {
      let data = {
        id: this.$utils.uuid(16),
        systemId: null,
        systemCode: null,
        menuId: null,
        menuName:''
      }
      this.$refs.systemTable.$refs.tstable.data.push(data)
    },
    deleteItem(row) {
      let index = this.$refs.systemTable.$refs.tstable.data.findIndex(
        res => res.id == row.id
      )
      if (index > -1) {
        this.$refs.columnTable.$refs.tstable.data.splice(index, 1)
      }
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.bi-save-con {
  height: 100%;
  .table-con {
    height: calc(100% - 60px);
    margin-left: 110px;
  }
}
</style>
